<template>
  <div class="page-wrap">
    <div v-if="showTopWrap" class="page-wrap__top">
      <slot name="title">
        <div class="default-title-wrap">
          <div class="title">{{ title }}</div>
          <div class="sub-title">
            {{ subTitle }}
          </div>
        </div>
      </slot>
      <slot name="after-title">
        <el-tabs
          v-if="tabs?.length"
          :model-value="activeTab"
          class="app-tabs"
          @tab-change="handleTabChange"
        >
          <el-tab-pane
            v-for="tab in tabs"
            :key="tab.value"
            :label="tab.label"
            :name="tab.value"
            :disabled="tab?.disabled"
          ></el-tab-pane>
        </el-tabs>
      </slot>
    </div>
    <div class="page-wrap__content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface IEmit {
  (e: 'tab-change', name: string | number): void
  (e: 'update:activeTab', name: string | number): void
}

interface IProps {
  title?: string
  subTitle?: string
  activeTab?: string | number
  tabs?: (LabelValue<string | number> & { disabled?: boolean })[]
}

const emit = defineEmits<IEmit>()
const props = defineProps<IProps>()
const instance = getCurrentInstance()

const showTopWrap = computed(() => {
  return props.title || instance?.slots.title || instance?.slots.afterTitle
})

function handleTabChange(name: string | number) {
  emit('tab-change', name)
  emit('update:activeTab', name)
}
</script>

<style lang="scss">
.page-wrap {
  &__content {
    & > div:first-child {
      // box-shadow:
      //   0 4px 5px 0 rgba(31, 35, 41, 0.08),
      //   0 2px 4px 0 rgba(31, 35, 41, 0.04) !important;
    }
  }
}
</style>
<style lang="scss" scoped>
.page-wrap {
  @apply h-full flex flex-col;

  &__top {
    @apply px-[24px] py-[17px] bg-white;

    border-left: 1px solid #eeeff2;
    border-bottom: 1px solid #eeeff2;

    :deep(.el-divider--vertical) {
      transform: rotate(15deg) !important;
    }

    :deep(.el-page-header__title) {
      @apply text-[#83858A] text-[16px];
    }

    .default-title-wrap {
      @apply flex items-center;
    }

    .title {
      @apply text-[#14161A] text-[16px] font-semibold leading-[24px];
    }

    .sub-title {
      @apply ml-[10px] text-[12px] text-[#83858A];
    }

    :deep(.el-tabs__nav-wrap) {
      &::after {
        display: none !important;
      }
    }
  }

  &__content {
    @apply flex-1 p-[24px] overflow-auto;

    & > * {
      // @apply m-6;
    }
  }
}
</style>
